<template>
	<view class="page-width shell">
		<view class="page-width detail-parameter dir-left-nowrap main-between cross-center">
			<view class="content dir-top-nowrap">
				<view class="top dir-left-nowrap cross-bottom box-grow-1">
					<text class="price" :class="[`${level_show == 1 ? 'member-price' : `${theme}-color`}`]">{{level_show == 1 ? member_price : price}}</text>
					<text class="original-price gray"
					      v-if="level_show != 1 && !(vip_card_appoint.discount !== null && vip_card_appoint.is_my_vip_card_goods == 1 && mall.setting.is_show_super_vip == '1')"
					>{{original_price}}</text>
					<text class="member-logo" v-if="level_show == 1">会员价</text>
					<view class="sup-vip" v-if="vip_card_appoint.discount > 0">
						<app-sup-vip
								:is_vip_card_user="vip_card_appoint.is_vip_card_user"
								:discount="vip_card_appoint.discount"
						></app-sup-vip>
					</view>
				</view>
				<view class="bottom dir-left-nowrap cross-bottom  box-grow-1">
					<text class="original-price gray bottom-original"
					      v-if="vip_card_appoint.discount !== null && vip_card_appoint.is_my_vip_card_goods == 1 && mall.setting.is_show_super_vip == '1' && level_show != 1"
					>{{original_price}}</text>
					<text
							v-if="level_show == 1 || (vip_card_appoint.discount !== null && vip_card_appoint.is_my_vip_card_goods == 1 && mall.setting.is_show_super_vip == '1' && level_show == 1)"
							:class="[`${theme}-color`, `bottom-price`]"
					>
						{{price}}
					</text>
					<text class="sales gray">销量 {{sales}}{{unit}}</text>
				</view>
			</view>
			<!-- <button class="share" open-type="share" >
				<image src="/plugins/gift/image/begging-gift.png"></image>
			</button> -->
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import appSupVip from '../../../../components/page-component/app-sup-vip/app-sup-vip.vue';
	
    export default {
        name: 'detail-parameter',
	    
	    props: [`theme`, `price_min`, `price_max`, `price_member_max`, `price_member_min`, `sales`, `unit`, `original_price`, `level_show`, `vip_card_appoint`],
	    
	    computed: {
            // 原价
            price() {
                if (this.price_min === this.price_max) {
                    return this.price_min;
                } else {
                    return `${this.price_min}-${this.price_max}`
                }
            },
		    // 会员价
		    member_price() {
                if (this.price_member_min === this.price_member_max) {
                    return this.price_member_max;
                } else {
                    return `${this.price_member_max}-${this.price_member_max}`
                }
		    },

            ...mapState({
                mall: state => state.mallConfig.mall
            })
	    },
	    
	    components: {
            'app-sup-vip': appSupVip,
	    }
    }
</script>

<style scoped lang="scss">
	@import "../../css/gift.scss";
	.shell {
		height: #{124upx};
		background-color: #ffffff;
	}
	.detail-parameter {
		padding: #{0 24upx};
		height: #{96upx};
		
		/*求礼物*/
		.share {
			width: #{96upx};
			height: 100%;
			border: none;
			padding: 0;
			background-color: transparent;
			border-radius: 0;
			margin: 0;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.content {
			width: calc(100% - #{96upx});
			height: 100%;
			/*售价*/
			.price {
				font-size: #{40upx};
				line-height: 1;
			}
			
			/*会员价颜色*/
			.member-price {
				color: #f39800;
			}
			
			.price:before {
				content: "￥";
				font-size: 60%;
			}
			/*原价*/
			.original-price {
				font-size: #{18upx};
				margin-left: #{20upx};
				text-decoration: line-through;
			}
			.original-price:before {
				content: "￥";
			}
			/*会员标志*/
			.member-logo {
				font-size: #{19upx};
				color: #f39800;
				line-height: 1;
				border-radius: #{6upx};
				background-color: #fef4e5;
				padding: #{4upx};
				border: #{1upx} solid #f39800;
				margin-left: #{12upx};
			}
			/*超级会员卡*/
			.sup-vip {
				margin-left: #{16upx};
			}
			
			.bottom {
				font-size: #{24upx};
				line-height: 1;
			}
			.bottom-price {
				font-size: #{23upx};
				margin-right: #{19upx};
			}
			
			.bottom-price:before {
				content: "￥";
			}
			
			.bottom-original {
				margin-right: #{29upx};
				margin-left: 0;
			}
			.sales {
				font-size: #{23upx};
			}
		}
	}
</style>